<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Ztree</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
    <link href="./../../../static/plugins/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet" />
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            高级操作
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <button class="btn btn-default" onclick="$.modal.openDetail('按钮操作','./../../../pages/element/module/tree-ztree-operate.html')">按钮操作</button>
                                    <button class="btn btn-default" onclick="$.modal.openDetail('节点事件','./../../../pages/element/module/tree-ztree-node.html')">节点事件</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading">
                            基本示例
                        </div>
                        <div class="panel-body">
                            <div id="ztree1" class="ztree"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading">
                            展开层级
                        </div>
                        <div class="panel-body">
                            <div id="ztree2" class="ztree"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading">
                            点击事件
                        </div>
                        <div class="panel-body">
                            <div id="ztree3" class="ztree"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading">
                            双击事件
                        </div>
                        <div class="panel-body">
                            <div id="ztree4" class="ztree"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading">
                            单选示例
                        </div>
                        <div class="panel-body">
                            <div id="ztree5" class="ztree"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading">
                            多选示例
                        </div>
                        <div class="panel-body">
                            <div id="ztree6" class="ztree"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading">
                            多选非关联
                        </div>
                        <div class="panel-body">
                            <div id="ztree7" class="ztree"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-heading">
                            选中事件
                        </div>
                        <div class="panel-body">
                            <div id="ztree8" class="ztree"></div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>

    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script src="./../../../static/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>



    <script type="text/javascript">
        var operateObj;
        $(function () {
            $.tree.init(
                {
                    id: 'ztree1',
                    url: './../../../static/data/tree.json',
                    expandLevel: -1,
                    onClick: function (event, treeId, treeNode) {
                        console.info(treeId);
                    }
                }
            );
            $.tree.init(
                {
                    id: 'ztree2',
                    url: './../../../static/data/tree.json',
                    expandLevel: 2
                }
            );
            $.tree.init(
                {
                    id: 'ztree3',
                    url: './../../../static/data/tree.json',
                    expandLevel: -1,
                    onClick: function (event, treeId, treeNode) {
                        $.modal.msg("你点击了" + treeNode.name);
                    }
                }
            );
            $.tree.init(
                {
                    id: 'ztree4',
                    url: './../../../static/data/tree.json',
                    expandLevel: -1,
                    onDblClick: function (event, treeId, treeNode) {
                        $.modal.msg("你双击了" + treeNode.name);
                    }
                }
            );
            $.tree.init(
                {
                    id: 'ztree5',
                    url: './../../../static/data/tree.json',
                    expandLevel: -1,
                    check: {
                        enable: true,
                        chkStyle: 'radio',
                        radioType: "all"
                    },
                }
            );
            $.tree.init(
                {
                    id: 'ztree6',
                    url: './../../../static/data/tree.json',
                    expandLevel: -1,
                    check: {
                        enable: true
                    },
                }
            );
            $.tree.init(
                {
                    id: 'ztree7',
                    url: './../../../static/data/tree.json',
                    expandLevel: -1,
                    check: {
                        enable: true,
                        chkboxType: { "Y": "", "N": "" }
                    },
                }
            );
            $.tree.init(
                {
                    id: 'ztree8',
                    url: './../../../static/data/tree.json',
                    expandLevel: -1,
                    check: {
                        enable: true
                    },
                    onCheck: function (event, treeId, treeNode) {
                        $.modal.msg("你勾选/取消勾选了" + treeNode.name);
                    }
                }
            );
        });
    </script>

</body>

</html>